import React, { Component } from "react";
import PropTypes from "prop-types";
import "./index.css";
export default class Header extends Component {
  // 进行限制
  static propTypes = {
    addToDo: PropTypes.func.isRequired,
  };
  handleKeyUp = (event) => {
    let { keyCode, target } = event;
    if (keyCode === 13) {
      if (target.value === "") {
        alert("输入不能为空");
        return;
      }
      console.log(target.value);
      const todoObj = {
        id: this.props.todos.length + 1,
        name: target.value,
        done: false,
      };
      this.props.addToDo(todoObj);
    }
  };
  render() {
    return (
      <div className="todo-header">
        <input
          onKeyUp={this.handleKeyUp}
          type="text"
          placeholder="请输入你的任务名称，按回车键确认"
        />
      </div>
    );
  }
}
